<script lang="ts" setup>
import { ref } from 'vue'
import { useUserAddress } from '@/stores/user-address'
import userData from './components/user-data.vue'
import appointmentSend from './components/appointment-send.vue'

const userAddress = useUserAddress()
const userAddressStore = ref(userAddress.addressData)
const problemDescription = ref('') // 替换原来的 value
// 储存选择的时间
const selectedTime = ref('')

// 点击立即下单
const handAppointmentMaster = () => {
  console.log(userAddressStore.value)
  console.log(problemDescription.value)
  console.log('选择的时间:', selectedTime.value) // 直接访问 ref 的 value
}

</script>

<template>
  <view class="repair">
    <!-- 问题描述 -->
    <view class="repair-description">
      <h1>问题描述</h1>
      <!-- 多行文本 -->
      <uni-easyinput type="textarea" v-model="problemDescription" :styles="{
        borderColor: 'transparent',
        borderWidth: '0',
        boxShadow: 'none',
        placeholderColor: '#999',
      }" placeholder="请输入你遇到的问题" :autoHeight="true" placeholderStyle="font-size: 30rpx;" :inputBorder="false" />
      <!-- 上传图片 -->
      <view class="publush-picker">
        <uni-file-picker />
      </view>
    </view>
    <!-- 学生信息 -->
    <h1 class="repair-h1">学生信息</h1>
    <userData />

    <!-- 预约师傅上门时间 -->
    <h1 class="repair-h1">预约师傅上门时间</h1>
    <view class="repair-send">
      <appointmentSend v-model="selectedTime" />
    </view>

    <!-- 立即下单 -->
    <view class="repair-fixed">
      <view class="repair-payment">
        <view>
          <h1 class="repair-payment-h1">填写订单信息后再下单哦~</h1>
          <text class="repair-payment-text">地址填写错误可能会有影响,请确认无误</text>
        </view>
        <view @click="handAppointmentMaster">
          <button type="primary" class="repair-payment-button">立即下单</button>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.repair {
  /* 为底部固定按钮留出空间，防止内容被遮挡 */
  padding-bottom: 120rpx;

  &-description {
    background-color: $uni-text-color-inverse ;
    padding: $uni-padding;
    border-radius: $uni-border-radius;
    box-shadow: $uni-box-shadow;
  }

  &-h1 {
    font-size: 30rpx;
    padding: 40rpx 0;
    font-weight: 700;
  }

  &-send {
    background-color: $uni-text-color-inverse ;
    padding: $uni-padding1;
    border-radius: $uni-border-radius;
    box-shadow: $uni-box-shadow;
  }

  // 立即下单 fixed
  &-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: $uni-padding;
    background-color: $uni-text-color-inverse;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
    z-index: 100;
  }

  &-payment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $uni-padding1;
    border-radius: $uni-border-radius;

    &-h1 {
      font-size: 28rpx;
      font-weight: 700;
    }

    &-text {
      font-size: 25rpx;
      color: $uni-text-color;
    }

    &-button {
      font-size: 26rpx;
      border-radius: 50rpx;
      background-color: #4fb7ff;
    }
  }

}
</style>